<template>
	<div class="standard_footerItem">
		<div class="footerItem-p1">
			<img class="footerItem-p1_st1" src="https://lyh.5ug.com/wwwroot/uploads/api/634-703-887/2023-02-17/63ef23e8a54f2eb4a1a6b868.png" />
			<div class="footerItem-p1_st2">差异化战略定位与构建，做价值与做利润双驱动</div>
		</div>
		<div class="footerItem-p2">
			<div class="footerItem-p2_lef">
				<div class="footerItem-p2_lht1">专家咨询电话（微信同号）</div>
				<div class="footerItem-p2_lht2">151-1230-5133</div>
				<div class="footerItem-p2_lht1">领英品牌规划</div>
				<div class="footerItem-p2_lht2">0755-23724081</div>
				<div class="footerItem-p2_lht3">深圳市宝安区航城街道洲石路650号宝星智荟城 4 栋 7 楼</div>
			</div>
			<div class="footerItem-p2_mul">
				<div class="p2_mul-gt1">
					<img class="mul-gt1_ds1" src="https://lyh.5ug.com/wwwroot/uploads/api/634-703-887/2023-02-14/63eafc47fb5183fe78bbd0c4.png" />
					<div class="mul-gt1_ds2">一起创造<br />让品牌成就非凡</div>
					<img class="mul-gt1_ds2" src="https://lyh.5ug.com/wwwroot/uploads/api/634-703-887/2023-02-14/63eafc47fb5183fe78bbd0c5.png" />
				</div>
				<div class="p2_mul-gt2">
					<div class="mul-gt2_xht1">留下您的电话号码，我们的品牌顾问将第一时间联系你</div>
					<div class="footer-stp1_mabox">
						<div class="stp1_mabox-btc">
							<el-input v-model="viewModel.mobile" class="stp1_mabox-xipt" placeholder="隐私保护已开启，请放心输入！"></el-input>
						</div>
						<div class="stp1_mabox-btc">
							<el-input v-model="viewModel.company" class="stp1_mabox-xipt" placeholder="请输入公司名称"></el-input>
						</div>
						<div class="stp1_mabox-but" @click="sumbit">提交</div>
					</div>
				</div>
			</div>
		</div>
		<div class="footerItem-p3">
			<div class="footerItem-p3_slist">
				<div class="p3_slist-txt" v-for="(sItem,sIndex) in navList" :key="sIndex" @click="tagChange(sItem.url)">{{ sItem.name }}</div>
			</div>
			<div class="footerItem-p3_bct">领英（深圳）企业规划版权所有<span class="footerItem-p3_bah">备案号：<a class="footerItem-p3_mal" href="https://beian.miit.gov.cn" target="_blank">粤ICP备2022155916号</a></span></div>
			<div class="footerItem-p3_fbc">
				<img class="footerItem-p3_nig" src="https://lyh.5ug.com/wwwroot/uploads/api/634-703-887/2023-02-14/63eb01a2fb5183fe78bbd27e.png" />
				<img class="footerItem-p3_nig footerItem-p3_nig2" src="https://lyh.5ug.com/wwwroot/uploads/api/634-703-887/2023-02-16/63ed9778c16213cd7dec9274.jpg" />
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				expertList: [{
					name: '专家咨询电话（微信同号）',
					value: '188-8888-8888'
				}, {
					name: '企业QQ',
					value: '5100 37502'
				}, {
					name: '领英企业规划',
					value: '0755-2372 4081'
				}, {
					name: '邮箱',
					value: '5100 37502@qq.com'
				}],
				navList: [{
					name: '关于领英',
					url: '/web/standard/about'
				}, {
					name: '解决方案&服务',
					url: '/web/standard/serve'
				}, {
					name: '客户&案例',
					url: '/web/standard/case'
				}, {
					name: '联系我们',
					url: '/web/standard/relation'
				}],
				viewModel: {
					mobile: '', //手机号码
					company: '' //公司名称
				}
			}
		},
		methods: {
			tagChange(url) {
				this.$router.push(url)
				document.body.scrollTop = document.documentElement.scrollTop = 0
			},
			async sumbit() {
				if (!this.viewModel.mobile) {
					this.$notify({
						title: '警告',
						message: '手机号不能为空',
						type: 'warning'
					})
					return
				}
				if (!this.checkPhone(this.viewModel.mobile)) {
					this.$notify.error({
						title: '错误',
						message: '请输入正确的手机号码'
					})
				}
				var repones = await this.$ala.httpGet('Api/Sms/Message', this.viewModel)
				if (repones.status === 1) {
					this.$notify({
						title: '提交成功',
						message: '稍后我们的品牌顾问将第一时间联系您',
						type: 'success'
					})
					this.viewModel = {
						mobile: '',
						company: ''
					}
				}
			},
			// 校验手机号码是否正确
			checkPhone(phone) {
				let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
				if (reg.test(phone)) return true
				else {
					return false
				}
			}
		}
	}
</script>
<style lang="scss">
	.standard_footerItem {
		width: 92vw;
		margin: auto;

		.footerItem-p1 {
			background-color: #ebebeb;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.footerItem-p1_st1 {
				height: 4.6vw;
				margin: 1.5vw;
			}

			.footerItem-p1_st2 {
				font-size: 1.5vw;
				font-family: '微软雅黑';
				color: #333333;
				margin-right: 12vw;
			}
		}

		.footerItem-p2 {
			margin-top: 60px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.footerItem-p2_lef {
				.footerItem-p2_lht1 {
					font-size: 1.39vw;
					color: #333333;
				}

				.footerItem-p2_lht2 {
					font-size: 3.82vw;
					color: #333333;
					margin-top: 10px;
					margin-bottom: 20px;
				}

				.footerItem-p2_lht3 {
					font-size: 1.113vw;
					color: #333333;
					margin-top: -2px;
				}
			}

			.footerItem-p2_mul {
				flex: 1;
				min-width: 0;
				margin-left: 8.5vw;
				margin-top: 0.4vw;

				.p2_mul-gt1 {
					border: 1px solid #000000;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					padding: 1.15vw 0;

					.mul-gt1_ds1 {
						height: 8.7vw;
						margin-left: 3.5vw;
					}

					.mul-gt1_ds2 {
						height: 7.2vw;
						margin-right: 0.5vw;
					}

					.mul-gt1_ds2 {
						font-size: 1.94vw;
						color: #333333;
						font-weight: bold;
						text-align: center;
						line-height: 1.8;
					}

					.mul-gt1_ds3 {
						height: 8.35vw;
					}
				}

				.p2_mul-gt2 {
					background-color: #000000;
					padding: 5px;
					margin-top: 0.5vw;

					.mul-gt2_xht1 {
						font-size: 0.75vw;
						color: #fff;
						padding: 0.2vw 0 0.5vw 0;
					}

					.footer-stp1_mabox {
						display: flex;
						flex-direction: row;
						align-items: center;

						.stp1_mabox-btc {
							height: 2vw;
							background-color: #fff;
							margin-right: 15px;
							display: flex;
							flex-direction: row;
							align-items: center;
							flex: 1;

							.stp1_mabox-xipt {
								flex: 1;
								height: 100%;
								min-width: 0;

								.el-input__inner {
									height: 100%;
									border-radius: 0;
									padding: 0 10px;
									border: none;
									font-size: 0.75vw;

									&::-webkit-input-placeholder {
										text-align: left;
										font-size: 0.75vw;
										color: #999999;
									}
								}
							}

							.stp1_mabox-xtxt {
								height: 1.17vw;
								line-height: 1.17vw;
								border-left: 1px solid #888888;
								font-size: 0.85vw;
								color: #333333;
								padding: 0 10px;
								cursor: pointer;
							}
						}

						.stp1_mabox-but {
							width: 8.004vw;
							height: 2vw;
							line-height: 2vw;
							text-align: center;
							background-color: #0099ff;
							font-size: 0.85vw;
							color: #FFFFFF;
							cursor: pointer;
							margin-right: 10px;
						}
					}
				}
			}
		}

		.footerItem-p3 {
			border-top: 1px solid #000000;
			margin-top: 36px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 3vw;

			.footerItem-p3_slist {
				padding: 10px 0;

				.p3_slist-txt {
					font-size: 1vw;
					color: #333333;
					line-height: 2;
					cursor: pointer;
				}
			}

			.footerItem-p3_bct {
				font-size: 1vw;
				color: rgba(#333333, 0.7);

				.footerItem-p3_bah {
					font-size: 1vw;
					color: rgba(#333333, 0.7);
					margin-left: 40px;
				}

				.footerItem-p3_mal {
					font-size: 1vw;
					color: rgba(#333333, 0.7);
				}
			}

			.footerItem-p3_fbc {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.footerItem-p3_nig {
				height: 7vw;
				margin-top: 36px;
				margin-left: 1vw;
			}

			.footerItem-p3_nig2 {
				height: 8vw;
			}
		}
	}
</style>